<template>
	<view class="content bg-default">
		<!-- 左侧菜品分类 -->
		<view class="dish-types">
			<!-- 今日 -->
			<DishType class="dish-type" icon="../../static/icons/calendar.png" name="今日" :active="active === -1"
				@tap="onDishTypeClick(-1)" />
			<!-- 所有菜品分类 -->
			<DishType v-for="item in dishTypes" :key="item.id" class="dish-type" :icon="item.icon" :name="item.name"
				:active="active === item.id" @tap="onDishTypeClick(item.id)" />

			<DishType style="margin-top: auto" icon="../../static/icons/logout.svg" name="退出" @tap="onLogout" />
		</view>
		<!-- 右侧菜品 -->
		<view class="dishes">
			<!-- 日期选择器 -->
			<uni-datetime-picker style="line-height: 50px; font-weight: bold" v-if="active === -1"
				v-model="dailyMenuDate" type="date" :clear-icon="false" :border="false"
				@change="onDailyMenyDateChange" />

			<!-- 菜品搜索框 -->
			<uni-search-bar v-show="active !== -1" v-model="searchText" class="uni-mt-10" radius="5" placeholder=""
				clearButton="auto" cancelButton="none" />

			<scroll-view class="dishes-container" scroll-y="true">
				<DishCard class="dish-card" v-for="dish in filteredDishList" :key="dish.id" :dish-id="dish.id"
					:name="dish.name" :type="dish.dishType" :score="dish.score" :count="dish.scoreCount"
					:image="dish.imageUrl" show-comment-button :swipe="isAdmin" @deleted="onDishDeleted" />

				<view class="add-dish" v-if="isAdmin && active === -1">
					<!-- <button v-if="dishList.length === 0" class="add-dish-btn" type="primary" size="mini"
						@tap="navigateToCreateDailyMenuPage">
						添加菜品
					</button>

					<button v-else class="add-dish-btn" type="primary" size="mini" @tap="navigateToCreateDailyMenuPage">
						修改菜单
					</button> -->
					<button class="add-dish-btn" type="primary" size="mini" @tap="navigateToCreateDailyMenuPage">
						设置菜单
					</button>
				</view>

				<!-- <view>id: {{ userStore.id }}</view>
				<view>phone: {{ userStore.phone }}</view>
				<view>role: {{ userStore.role }}</view>

				<view>menuTypeId: {{ menuTypeId }}</view>
				<view>dailyMenuId: {{ dailyMenuId }}</view>
				<view>dailyMenuDate: {{ dailyMenuDate }}</view> -->
			</scroll-view>
		</view>

		<!-- 手机号、密码登录弹窗 -->
		<!-- <uni-popup
			ref="popup"
			background-color="#fff"
			:mask-click="false"
		>
			<view class="popup-content">
				<view class="popup-content-title">登录聚芯食堂</view>
				<LoginBox></LoginBox>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
	import {
		useUserStore,
		USER
	} from '@/stores/user';
	import {
		getDishesByDishTypeId
	} from '../../apis/dish.js';
	import {
		getDailyMenuDishes
	} from '../../apis/dailyMenu.js';

	export default {
		data() {
			return {
				userStore: useUserStore(),
				// 当前选中的菜品分类的索引
				active: -1,
				// 所有菜品分类
				dishTypes: [],
				// 今日菜品
				dishList: [],

				// 查看今日菜单时，选择的日期，默认当天
				dailyMenuDate: new Date().toLocaleDateString(),
				// 今日菜单id
				dailyMenuId: 0,
				// 菜单类型id 3菜1汤
				menuTypeId: 0,

				// 搜索名称
				searchText: '',
			};
		},
		computed: {
			isAdmin() {
				return this.userStore?.role >= 2;
			},

			filteredDishList() {
				return this.dishList.filter((a) => a.name.includes(this.searchText));
			},
		},
		created() {
			if (!useUserStore().checkUser()) {
				uni.redirectTo({
					url: '../login/login',
				});
				return;
			}

			this.getDishTypes();
			// 第一次打开页面，默认获取active对应菜品分类的菜
			this.onDishTypeClick(this.active);
		},
		onLoad() {},
		onShow() {
			this.onDishTypeClick(this.active);
		},
		methods: {
			getDishTypes() {
				this.dishTypes = [{
						id: 1,
						name: '大荤',
						icon: '../../static/icons/chicken.png',
						order: 1
					},
					{
						id: 2,
						name: '小荤',
						icon: '../../static/icons/drumstick.png',
						order: 2
					},
					{
						id: 3,
						name: '素菜',
						icon: '../../static/icons/carrot.png',
						order: 3
					},
					{
						id: 4,
						name: '汤品',
						icon: '../../static/icons/soup.png',
						order: 4
					},
					{
						id: 5,
						name: '面条',
						icon: '../../static/icons/noodle.png',
						order: 5
					},
				];
			},
			// 点击分类获取菜品
			onDishTypeClick(id) {
				this.active = id;
				// console.log('this.active', this.active);
				// 点击今日
				if (id === -1) {
					this.searchText = '';
					return this.getDailyMenuDishes();
				}
				// 点击分类
				this.getDishesByType();
			},
			// 获取今日菜单
			getDailyMenuDishes() {
				getDailyMenuDishes(this.dailyMenuDate).then((res) => {
					// console.log('今日菜单', res);
					const {
						id,
						dishes,
						menuTypeId
					} = res;
					this.menuTypeId = menuTypeId;
					this.dailyMenuId = id;
					this.dishList = dishes;
				});
			},
			// 分类获取菜品
			getDishesByType() {
				uni.showLoading({
					title: '',
					mask: true,
				});
				// console.log('分类id 菜品', id);
				getDishesByDishTypeId(this.active)
					.then((res) => {
						// console.log('分类获取菜品', res);
						this.dishList = res;
					})
					.finally(() => {
						uni.hideLoading();
					});
			},
			// 删除菜单后更新菜品
			onDishDeleted() {
				this.getDishesByType();
			},
			// 选择今日菜单的日期
			onDailyMenyDateChange(e) {
				// console.log('onDailyMenyDateChange', e);
				// 根据日期获取今日菜单
				this.getDailyMenuDishes();
			},
			navigateToCreateDailyMenuPage() {
				uni.navigateTo({
					// url: '../../pages/creaate-daily-menu/creaate-daily-menu?date=' + this.dailyMenuDate,
					url: `../../pages/creaate-daily-menu/creaate-daily-menu?date=${this.dailyMenuDate}&dailyMenuId=${this.dailyMenuId}&menuTypeId=${this.menuTypeId}`,
				});
			},
			onLogout() {
				// console.log('onLogout');
				uni.showModal({
					title: '确定退出登录吗',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							useUserStore().saveUser({
								id: -1,
								role: 0,
							});
							uni.redirectTo({
								url: '/pages/login/login',
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
				});
			},
			// handlePasswordLogin() {
			// 	this.$refs.popup.open('bottom');
			// },
		},
	};
</script>

<style scoped>
	.content {
		display: flex;
	}

	.dish-types {
		width: 150rpx;
		display: flex;
		flex-direction: column;
	}

	.dish-type {
		width: 150rpx;
		height: 150rpx;
	}

	.dishes {
		flex: 1;
		background-color: #fff;

		display: flex;
		flex-direction: column;
	}

	.dishes-container {
		height: calc(100% - 56px);
	}

	.dish-card {
		/* margin: 12rpx; */
	}

	.add-dish {
		text-align: center;
	}

	.add-dish-btn {
		width: 160rpx;
		padding: 0;
		margin-top: 24rpx;
	}
</style>